<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import {
  Scene,
  PointLayer,
  CityBuildingLayer,
  LineLayer,
  PolygonLayer,
} from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import { g1 } from "./data/data";

export default {
  data() {
    return {
      sceness: null,
      gaodemap: null,
    };
  },
  // created() {
  //   window._AMapSecurityConfig = {
  //     securityJsCode: "27d28e2e3d45e78f90dffcb2fba4216e",
  //   };
  // },
  mounted() {
    this.initData();
  },
  methods: {
    lnglat2container(data) {
      if (!data) return;
      var inputVal = data.split(",");
      var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
      var pixel = this.gaodemap.lngLatToContainer(lnglat);
      console.log(pixel);
    },
    initData() {
      var gaodemap2 = new GaodeMap({
        style: "dark",
        center: [115.282125, 36.536698],
        pitch: 40,
        viewMode: "3D", //开启3D视图,默认为关闭
        rotation: 20,
        zoom: 11,
        // token: "27d28e2e3d45e78f90dffcb2fba4216e",
      });

      // var controlBar = new AMap.ControlBar({
      //   position: {
      //     right: "310px",
      //     top: "60px",
      //   },
      // });
      // controlBar.addTo(this.gaodemap);

      // var toolBar = new AMap.ToolBar({
      //   position: {
      //     right: "340px",
      //     top: "310px",
      //   },
      // });
      // toolBar.addTo(this.gaodemap);

      // var that = this;
      // this.gaodemap.on("click", function (e) {
      //   console.log(e.lnglat.toString());
      //   that.lnglat2container(e.lnglat.toString());
      // });

      const scene = new Scene({
        id: "map",
        map: gaodemap2,
        // map: new GaodeMap({
        //   mapInstance: this.gaodemap,
        // }),
      });
      this.gaodemap = scene.map;
      var that = this;
      this.gaodemap.on("click", function (e) {
        console.log(e.lnglat.toString());
        that.lnglat2container(e.lnglat.toString());
      });

      //        fetch(
      //   'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
      // ).then(async res => {
      //   const pointLayer = new CityBuildingLayer();
      //   pointLayer
      //     .source(await res.json())
      //     .size('floor', [ 0, 500 ])
      //     .color('rgba(242,246,250,1.0)')
      //     .animate({
      //       enable: true
      //     })
      //     .active({
      //       color: '#0ff',
      //       mix: 0.5
      //     })
      //     .style({
      //       opacity: 0.7,
      //       baseColor: 'rgb(16, 16, 16)',
      //       windowColor: 'rgb(30, 60, 89)',
      //       brightColor: 'rgb(255, 176, 38)',
      //       sweep: {
      //         enable: true,
      //         sweepRadius: 2,
      //         sweepColor: '#1990FF',
      //         sweepSpeed: 0.5,
      //         sweepCenter: [ 120.145319, 30.238915 ]
      //       }
      //     });
      //   scene.addLayer(pointLayer);
      // });

      // fetch(
      //   'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
      // )
      //   .then(data => data.json())
      //   .then(
      //     ({
      //       lakeBorderData,
      //       lakeData,
      //       landData
      //     }) => {
      //       const lakeLayer = new PolygonLayer()
      //         .source(lakeData)
      //         .shape('fill')
      //         .color('#1E90FF')
      //         .style({
      //           opacity: 0.4,
      //           opacityLinear: {
      //             enable: true,
      //             dir: 'out' // in - out
      //           }
      //         });
      //       const landLayer = new PolygonLayer()
      //         .source(landData)
      //         .shape('fill')
      //         .color('#3CB371')
      //         .style({
      //           opacity: 0.4,
      //           opacityLinear: {
      //             enable: true,
      //             dir: 'in' // in - out
      //           }
      //         });

      //       const lakeBorderLayer = new PolygonLayer()
      //         .source(lakeBorderData)
      //         .shape('fill')
      //         .color('#ccc')
      //         .style({
      //           opacity: 0.5,
      //           opacityLinear: {
      //             enable: true,
      //             dir: 'in' // in - out
      //           }
      //         });

      //       scene.addLayer(lakeLayer);
      //       scene.addLayer(lakeBorderLayer);
      //       scene.addLayer(landLayer);
      //     }
      //   );

      // fetch(
      //   'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
      // )
      //   .then(res => res.json())
      //   .then(data => {
      //     const layer = new LineLayer({
      //       zIndex: 0,
      //       depth: true
      //     })
      //       .source(data)
      //       .size(1)
      //       .shape('line')
      //       .color('#1990FF')
      //       .animate({
      //         interval: 15, // 间隔
      //         duration: 2, // 持续时间，延时
      //         trailLength: 4 // 流线长度
      //       });
      //     scene.addLayer(layer);
      //   });

      const datad = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              name: "馆陶县",
              adcode: 130433,
              county: "馆陶县",
              county_adcode: 130433,
              county_type: "县",
              city: "邯郸市",
              city_adcode: 130400,
              city_type: "地级市",
              province: "河北省",
              province_adcode: 130000,
              province_type: "省",
              name_en: "Guantao",
              name_var: "Guǎn Táo",
            },
            geometry: {
              type: "LineString",
              coordinates: [
                [
                  [115.472417, 36.751016],
                  [115.469019, 36.743215],
                  [115.459643, 36.73058],
                  [115.452371, 36.725168],
                  [115.443992, 36.712701],
                  [115.444191, 36.705446],
                  [115.439318, 36.693029],
                  [115.424814, 36.687912],
                  [115.41434, 36.686357],
                  [115.413599, 36.680057],
                  [115.406117, 36.676245],
                  [115.404155, 36.67362],
                  [115.402273, 36.663885],
                  [115.386984, 36.659953],
                  [115.380394, 36.656137],
                  [115.382125, 36.646698],
                  [115.373031, 36.633142],
                  [115.359816, 36.621823],
                  [115.350515, 36.629025],
                  [115.348083, 36.628343],
                  [115.345027, 36.622474],
                  [115.345676, 36.620361],
                  [115.338733, 36.612851],
                  [115.340615, 36.605415],
                  [115.335433, 36.603251],
                  [115.333787, 36.591572],
                  [115.328206, 36.582001],
                  [115.329059, 36.573962],
                  [115.32602, 36.56341],
                  [115.325301, 36.549405],
                  [115.31627, 36.540132],
                  [115.305825, 36.533134],
                  [115.291144, 36.510772],
                  [115.287957, 36.501875],
                  [115.277828, 36.491122],
                  [115.277509, 36.476915],
                  [115.273347, 36.469524],
                  [115.274221, 36.46417],
                  [115.267662, 36.463722],
                  [115.267807, 36.460181],
                  [115.2574, 36.457321],
                  [115.252518, 36.453554],
                  [115.250894, 36.448588],
                  [115.245854, 36.448846],
                  [115.248456, 36.451711],
                  [115.240695, 36.452595],
                  [115.237242, 36.446036],
                  [115.226037, 36.4429],
                  [115.220226, 36.443664],
                  [115.220727, 36.446303],
                  [115.218307, 36.449486],
                  [115.207991, 36.450705],
                  [115.206655, 36.459483],
                  [115.207641, 36.46636],
                  [115.205196, 36.466598],
                  [115.204442, 36.463382],
                  [115.200068, 36.465514],
                  [115.194997, 36.464418],
                  [115.191433, 36.460908],
                  [115.18769, 36.463863],
                  [115.18224, 36.464651],
                  [115.177984, 36.462616],
                  [115.165706, 36.465419],
                  [115.16331, 36.460457],
                  [115.160825, 36.460931],
                  [115.158386, 36.463899],
                  [115.158698, 36.468368],
                  [115.151672, 36.476725],
                  [115.146574, 36.478382],
                  [115.137905, 36.478442],
                  [115.129379, 36.481806],
                  [115.126238, 36.483825],
                  [115.126685, 36.486654],
                  [115.124168, 36.489162],
                  [115.112616, 36.493986],
                  [115.111136, 36.496839],
                  [115.113828, 36.510917],
                  [115.117972, 36.519345],
                  [115.123402, 36.525854],
                  [115.12723, 36.527678],
                  [115.146888, 36.526305],
                  [115.147262, 36.528727],
                  [115.154415, 36.529446],
                  [115.155063, 36.536639],
                  [115.160024, 36.538697],
                  [115.168614, 36.538481],
                  [115.167715, 36.54071],
                  [115.170496, 36.56443],
                  [115.172229, 36.568901],
                  [115.177415, 36.573729],
                  [115.177809, 36.576209],
                  [115.176474, 36.577044],
                  [115.177562, 36.580795],
                  [115.186354, 36.579986],
                  [115.188709, 36.586413],
                  [115.192884, 36.588724],
                  [115.195, 36.597326],
                  [115.199936, 36.607073],
                  [115.209636, 36.612113],
                  [115.21373, 36.611698],
                  [115.216679, 36.620511],
                  [115.216453, 36.622459],
                  [115.195734, 36.62656],
                  [115.194802, 36.628077],
                  [115.197453, 36.636242],
                  [115.200442, 36.637066],
                  [115.209193, 36.635064],
                  [115.208834, 36.633357],
                  [115.216521, 36.632298],
                  [115.223765, 36.633568],
                  [115.225963, 36.638883],
                  [115.231821, 36.639055],
                  [115.235591, 36.640875],
                  [115.237504, 36.647844],
                  [115.236812, 36.653535],
                  [115.230446, 36.649965],
                  [115.226051, 36.656641],
                  [115.235181, 36.674729],
                  [115.248546, 36.676748],
                  [115.254318, 36.675624],
                  [115.265453, 36.685105],
                  [115.269633, 36.686887],
                  [115.275718, 36.685288],
                  [115.282359, 36.674748],
                  [115.289927, 36.670256],
                  [115.300722, 36.666349],
                  [115.304732, 36.66812],
                  [115.30744, 36.672884],
                  [115.307778, 36.677377],
                  [115.305704, 36.680875],
                  [115.295614, 36.684455],
                  [115.290415, 36.690015],
                  [115.292464, 36.699609],
                  [115.287642, 36.701242],
                  [115.291212, 36.706463],
                  [115.299886, 36.703924],
                  [115.300877, 36.70635],
                  [115.310892, 36.707183],
                  [115.319764, 36.713967],
                  [115.323359, 36.720659],
                  [115.323628, 36.723272],
                  [115.319562, 36.72876],
                  [115.319534, 36.732869],
                  [115.321699, 36.732884],
                  [115.321678, 36.739494],
                  [115.31923, 36.739999],
                  [115.31887, 36.737905],
                  [115.310897, 36.738029],
                  [115.306507, 36.745607],
                  [115.307418, 36.751202],
                  [115.30446, 36.751747],
                  [115.306771, 36.758098],
                  [115.312321, 36.762241],
                  [115.324561, 36.76175],
                  [115.325843, 36.766949],
                  [115.323269, 36.773159],
                  [115.32667, 36.778643],
                  [115.339276, 36.779958],
                  [115.343111, 36.786263],
                  [115.346488, 36.785789],
                  [115.34967, 36.779002],
                  [115.353343, 36.778868],
                  [115.357079, 36.7731],
                  [115.366598, 36.764263],
                  [115.373348, 36.763193],
                  [115.373634, 36.764839],
                  [115.385582, 36.762809],
                  [115.396069, 36.756825],
                  [115.403838, 36.767923],
                  [115.414924, 36.766287],
                  [115.414418, 36.764088],
                  [115.423337, 36.761245],
                  [115.42594, 36.763241],
                  [115.434191, 36.764582],
                  [115.441005, 36.762892],
                  [115.442408, 36.760594],
                  [115.442114, 36.755712],
                  [115.443799, 36.754797],
                  [115.453396, 36.754887],
                  [115.452916, 36.756708],
                  [115.455836, 36.756574],
                  [115.468644, 36.754717],
                  [115.468046, 36.750612],
                  [115.472417, 36.751016],
                ],
              ],
            },
          },
        ],
      };
      // const layer = new PolygonLayer()
      //   .source(datad)
      //   .shape("fill")
      //   .setAutoFit(true)
      //   .style({
      //     opacity: 0.6,
      //     raisingHeight: 14,
      //   });
      // scene.addLayer(layer);

      // const layer2 = new LineLayer({})
      //   .source(datad)
      //   .size(40)
      //   .shape("wall")
      //   .style({
      //     opacity: "5",
      //     sourceColor: "#0DCCFF",
      //     targetColor: "rbga(255,255,255, 0)",
      //   });
      // scene.addLayer(layer2);

      scene.addImage(
        "arrow",
        "https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg"
      );
      
      //馆陶县区域地图
      // fetch(
      //   "http://127.0.0.1:8089/geoserver/sptest/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sptest%3Aguantaoxianquyu&maxFeatures=50&outputFormat=application%2Fjson"
      // )
      //   .then((res) => res.json())
      //   .then((data) => {
          const layer2 = new LineLayer({})
            .source(datad)
            .size(40)
            .shape("wall")
            .style({
              opacity: "5",
              sourceColor: "#0DCCFF",
              targetColor: "rbga(255,255,255, 0)",
            });
          scene.addLayer(layer2);
        // });

      // fetch(
      //   "http://127.0.0.1:8089/geoserver/sptest/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sptest%3A%E9%A6%86%E9%99%B6%E5%86%9C%E6%9D%91%E4%BE%9B%E6%B0%B4%E7%AE%A1%E7%BD%911&maxFeatures=950&outputFormat=application%2Fjson"
      // )
      //   .then((res) => res.json())
      //   .then((data) => {
          const layer3 = new LineLayer({
            zIndex: 0,
            depth: true,
          })
            .source(g1)
            .size(1)
            .shape("line")
            .texture("arrow")
            .color("#1990FF")
            .animate({
              interval: 1, // 间隔
              duration: 1, // 持续时间，延时
              trailLength: 2, // 流线长度
            })
            .style({
              opacity: 0.6,
              lineTexture: true, // 开启线的贴图功能
              iconStep: 10, // 设置贴图纹理的间距
              borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
              borderColor: "#fff", // 默认为 #ccc
            });
          scene.addLayer(layer3);
        // });
    },
  },
};
</script>
<style>
::-webkit-scrollbar {
  display: none;
}

html,
body {
  overflow: hidden;
  margin: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>